<!-- 表单的组件 -->
<template>

  <div class="form-table">
    <el-table
      :data="tableData"
      border
    >

      <el-table-column
        label="#" width="50" fixed>
        <template slot-scope="scope" >
          <div class="scope-index">
            <span>{{scope.$index + 1}}</span>
          </div>
          <div class="scope-action">
            <el-button @click="handleRemove(scope.$index)" type="danger" icon="el-icon-minus" size="mini" circle></el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.length==0">
      </el-table-column>
      <template v-else>
		  <!-- 显示元素名称 -->

        <el-table-column
          v-for="(column,index) in columns"
          :key="getKey()"
          :label="column.name"
        >
          <template slot-scope="scope" v-if="column.options.show== true ">
              <!--:rules="{required: true, message: '不能为空', trigger: 'blur'}"-->
                      <el-form-item  :prop="widget.model+'.' + scope.$index + '.'+column.model"  :rules="column.rules?column.rules:[]">
                      <!-- 调用父组件生成具体表单 -->
                          <!--onclick="handlerRow(column.model,scope.$index)"-->
                         <GenerateElementItem :blanks="blanks"
                                              is-table="table" :widget="column"
                                              :path="widget.model+'.' + scope.$index + '.'+column.model"
                                              :models_temp="models_temp"
                                              v-model="scope['row'][column.model]"
                                              :models.sync="dataModels" :remote="remote">
                          <template v-slot:[blank.name]="blankScope" v-for="blank in blanks">
                            <slot :name="blank.name" :model="scope.row"></slot>
                          </template>
                        </GenerateElementItem>
                      </el-form-item>
          </template>

        </el-table-column>
      </template>

    </el-table>
<!--    <el-button icon="el-icon-plus" type="text" @click="handleAddRow">添加</el-button>-->
      <el-button type="primary"
                 :disabled="widget.options.disabled"
                 @click.native="handleAddRow()">添加</el-button>

  </div>
</template>

<script>
    import {verification } from  '../router/verification.js'
    import {getLable,guid} from '../js/formUtils.js'

    export default {
  components: {
    GenerateElementItem: () => import('../GenerateElementItem.vue')
  },
  props: ['columns', 'value', 'models', 'remote', 'blanks','models_temp','widget'],

  data () {
    return {
      tableData: this.value,
      dataModels: this.models
    }
  },
  created(){
  },
  mounted () {
      for(var i=0;i<this.columns.length;i++){
          if(this.columns[i].rules) {
              for (var j = 0; j < this.columns[i].rules.length; j++) {
                  this.columns[i].rules[j].validator=this.validatePass;
              }
          }
      }
  },
  methods: {
      validatePass(rule, info, callback) {
          verification(rule,info,callback,null)
    },
    getKey(){
      return    guid();
    },
    handleAddRow () {
      let item = {}
      for (let i = 0; i < this.columns.length; i++) {
          item[this.columns[i].model] = this.columns[i].options.defaultValue
          item["ID_"] = guid()
      }

      this.tableData.push(item);

    },

    handleRemove (index) {
      this.tableData.splice(index, 1)
    },
	handleFoc(ee){
		// console.log(ee.currentTarget );
		//var delTarget = ee.currentTarget.nextElementSibling;
		//    delTarget.className = 'scope-index';
		//console.log(delTarget);
	}
      /*handlerRow(item,index){
        this.filedName=item;
        this.rowIndex=index;
      }*/
  },
  watch: {
    /*value (val) {
      this.tableData = val
    },
    tableData (val) {
      this.$emit('input', val)
    },
    dataModels: {
      deep: true,
      handler (val) {
            this.$emit('update:models', val)
      }
    },
    models: {
      deep: true,
      handler (val) {
        this.dataModels = val
      }
    },*/
  },
  created(){

    }
}
</script>

<style lang="scss">
.form-table{
  .el-table__empty-block{
    display: none;
  }

  .scope-action{
    display: none;
  }

  .scope-index{
    display: block;
  }

  .hover-row{
    .scope-action{
      display: block;
      .el-button{
        padding: 3px;
      }
    }

    .scope-index{
      display: none;
    }
  }
}
</style>
